<template>
  <el-form
    :model="formData"
    ref="vForm"
    :rules="rules"
    label-position="left"
    label-width="80px"
    size="default"
    @submit.prevent
  >
    <div class="tab-container">
      <el-tabs v-model="TABActiveTab" type="border-card">
        <el-tab-pane name="tab1" label="工作经历操作">
          <div class="card-container">
            <el-card
              style="
                 {
                  width: 100% !important;
                  background: #fafafa;
                }
              "
              shadow="never"
            >
              <template #header>
                <div class="clear-fix">
                  <h2>工作经历</h2>
                  <i class="float-right el-icon-arrow-down"></i>
                </div>
              </template>
              <el-row>
                <el-col :span="12" class="grid-cell">
                  <el-form-item
                    label="公司名称"
                    prop="COMPANY"
                    class="label-center-align"
                  >
                    <el-input
                      v-model="formData.COMPANY"
                      type="text"
                      clearable
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12" class="grid-cell">
                  <el-form-item
                    label="职位"
                    prop="POSITION"
                    class="label-center-align"
                  >
                    <el-input
                      v-model="formData.POSITION"
                      type="text"
                      clearable
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item
                label="工作时间"
                prop="DATA"
                class="label-center-align"
              >
                <el-date-picker
                  is-range
                  v-model="formData.DATA"
                  type="daterange"
                  class="full-width-input"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  clearable
                ></el-date-picker>
              </el-form-item>
              <el-form-item
                label="工作内容"
                prop="WORK_CONTENT"
                class="label-center-align"
              >
                <el-input
                  type="textarea"
                  v-model="formData.WORK_CONTENT"
                  rows="3"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="工作业绩"
                prop="WORK_PERFORMANCE"
                class="label-center-align"
              >
                <el-input
                  type="textarea"
                  v-model="formData.WORK_PERFORMANCE"
                  rows="3"
                ></el-input>
              </el-form-item>
              <div class="static-content-item">
                <el-button type="primary">保存</el-button>
              </div>
            </el-card>
          </div>
        </el-tab-pane>
        <el-tab-pane name="tab-pane-90623" label="工作经济预览"> </el-tab-pane>
      </el-tabs>
    </div>
  </el-form>
</template>

<script>
import { defineComponent, toRefs, reactive, getCurrentInstance } from "vue";
export default defineComponent({
  components: {},
  props: {},
  setup() {
    const state = reactive({
      formData: {
        COMPANY: "",
        POSITION: "",
        DATA: null,
        WORK_CONTENT: "",
        WORK_PERFORMANCE: "",
      },
      rules: {},
      TABActiveTab: "tab1",
    });
    const instance = getCurrentInstance();
    const submitForm = () => {
      instance.ctx.$refs["vForm"].validate((valid) => {
        if (!valid) return;
        //TODO: 提交表单
      });
    };
    const resetForm = () => {
      instance.ctx.$refs["vForm"].resetFields();
    };
    return {
      ...toRefs(state),
      submitForm,
      resetForm,
    };
  },
});
</script>

<style lang="scss">
.el-input-number.full-width-input,
.el-cascader.full-width-input {
  width: 100% !important;
}

.el-form-item--medium {
  .el-radio {
    line-height: 36px !important;
  }

  .el-rate {
    margin-top: 8px;
  }
}

.el-form-item--small {
  .el-radio {
    line-height: 32px !important;
  }

  .el-rate {
    margin-top: 6px;
  }
}

.el-form-item--mini {
  .el-radio {
    line-height: 28px !important;
  }

  .el-rate {
    margin-top: 4px;
  }
}

.clear-fix:before,
.clear-fix:after {
  display: table;
  content: "";
}

.clear-fix:after {
  clear: both;
}

.float-right {
  float: right;
}
</style>

<style lang="scss" scoped>
div.table-container {
  table.table-layout {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;

    td.table-cell {
      display: table-cell;
      height: 36px;
      border: 1px solid #e1e2e3;
    }
  }
}

div.tab-container {
}

.label-left-align :deep(.el-form-item__label) {
  text-align: left;
}

.label-center-align :deep(.el-form-item__label) {
  text-align: center;
}

.label-right-align :deep(.el-form-item__label) {
  text-align: right;
}

.custom-label {
}

.static-content-item {
  min-height: 20px;
  display: flex;
  align-items: center;

  :deep(.el-divider--horizontal) {
    margin: 0;
  }
}
</style>